@import "mixins";

:root {
  --color-app-loading-spinner: #31a0f4;
}

.Classic {
  .only-emudeck {
    display: none !important;
  }
  .previewSpinner {
    margin-left: calc(0.5 * (100vw - var(--nav-width)) - 2.5em);
  }
  .appOverlay {
    outline: 2px solid var(--color-preview-user-background);
    opacity: 0;
    transition: 0.5s;
    &:hover {
      opacity: 1;
    }

    .imageSelector {
      polyline {
        stroke-width: var(--select-arrow-left-width, 55);
      }
    }
    & > .appInfo .title {
      min-height: 20px;
      span {
        text-overflow: ellipsis;
      }
    }
    & > .appInfo > div.imageIndex {
      text-align: right !important;
      padding: 6px 8px 0 0 !important;
      font-size: calc(var(--preview-image-size) * 3em) !important;
    }
    .btn {
      @include button();
      @include clickButtonColor(click-button);
      display: initial;
      padding: 5px;
      flex: 1;
      font-size: 12px;
      border-radius: 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: var(--color-click-button-text-hover);
        border-color: var(--color-click-button-border-hover);
        background-color: var(--color-click-button-background-hover);

        fill: var(--color-click-button-text-hover);
      }

      &:active {
        color: var(--color-click-button-text-active);
        border-color: var(--color-click-button-border-active);
        background-color: var(--color-click-button-background-active);

        fill: var(--color-click-button-text-active);
      }
      img {
        display: none !important;
      }
    }
  }
  ng-text-input,
  ng-bubbles,
  ng-select {
    &.required,
    &.missing,
    &.filled {
      .display {
        border: 0;
      }
    }
    &.required {
      border: 1px solid var(--color--required) !important;
      &:hover,
      &:focus {
        border: 1px solid var(--color--required-hover) !important;
      }
    }
    &.missing {
      border: 1px solid var(--color--missing) !important;
      &:hover,
      &:focus {
        border: 1px solid var(--color--missing-hover) !important;
      }
    }
    &.filled {
      border: 1px solid var(--color--filled) !important;
      &:hover,
      &:focus {
        border: 1px solid var(--color--filled-hover) !important;
      }
    }
  }
  --color--accent: #fff;
  --color--required: #137c38;
  --color--required-hover: #1bd85e;
  --color--missing: var(--color-error);
  --color--missing-hover: var(--color-error);
  --color--filled: var(--color--required);
  --color--filled-hover: var(--color--required-hover);
  --grid-app: "titlebar titlebar titlebar" "navarea navborder route";
  --grid-app-rows: auto 1fr;
  --grid-app-columns: auto auto 1fr;
  --nav-width: 20vw;
  --nav-width-max: 100vw;
  --nav-direction: column;
  --nav-parsers-display: flex;
  --color-alert-background: #121212;
  --color-alert-text: #c8c8c8;
  --border-width-alert: 1px 1px 1px 1px;
  --color-app-loading-spinner: #0ad868;
  --color-click-button-background: rgba(0, 0, 0, 0);
  --color-click-button-background-active: #179443;
  --color-click-button-background-disabled: #414141;
  --color-click-button-background-hover: #1bd85e;
  --color-click-button-border: #1db954;
  --color-click-button-border-active: #179443;
  --color-click-button-border-disabled: #121212;
  --color-click-button-border-hover: #1bd85e;
  --color-click-button-text: #a0a0a0;
  --color-click-button-text-active: #f0fff0;
  --color-click-button-text-disabled: #9f9f9f;
  --color-click-button-text-hover: #f0fff0;
  --padding-click-button: 0.2em 0.5em;
  --radius-click-button: 0px;
  --color-dangerous-click-button-background: rgba(0, 0, 0, 0);
  --color-dangerous-click-button-background-active: #941722;
  --color-dangerous-click-button-background-disabled: #414141;
  --color-dangerous-click-button-background-hover: #d81b33;
  --color-dangerous-click-button-border: #b91d24;
  --color-dangerous-click-button-border-active: #941722;
  --color-dangerous-click-button-border-disabled: #121212;
  --color-dangerous-click-button-border-hover: #d81b33;
  --color-dangerous-click-button-text: #a0a0a0;
  --color-dangerous-click-button-text-active: #f0fff0;
  --color-dangerous-click-button-text-disabled: #9f9f9f;
  --color-dangerous-click-button-text-hover: #f0fff0;
  --color-error: #d81b5e;
  --color-fuzzy: #551a8b;
  --color-info: #1b5ed8;
  --color-input-background: #101010;
  --color-input-background-disabled: #373737;
  --color-input-background-focus: #101010;
  --color-input-background-hover: #101010;
  --color-input-border: #0d7e35;
  --color-input-border-disabled: #00cc4d;
  --color-input-border-focus: #00ff7e;
  --color-input-border-hover: #1bd85e;
  --color-input-shadow: rgba(0, 0, 0, 0);
  --color-input-shadow-disabled: rgba(0, 0, 0, 0);
  --color-input-shadow-focus: rgba(0, 255, 115, 0.43);
  --color-input-shadow-hover: rgba(0, 0, 0, 0);
  --color-input-text: #a0a0a0;
  --color-input-text-disabled: #a0a7a0;
  --color-input-text-focus: #f0fff0;
  --color-input-text-hover: #f0fff0;
  --margin-input-text-hover: #040404;
  --padding-input-text: 0.2em 0.1em;
  --margin-input-text: 0 0 0.5em 0;
  --color-logger-menu-background: #050505;
  --color-logger-messages-background: #181818;
  --color-logger-messages-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-logger-messages-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-logger-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-logger-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-logger-bugreport-background: #000000;
  --color-logger-messages-text: #c8c8c8;
  --color-logger-reportid: rgb(200, 200, 0);
  --color-main-background: #121212;
  --color-nav-background: #121212;
  --color-nav-link-border: rgba(0, 0, 0, 0);
  --color-nav-link-border-active: #1ed660;
  --color-nav-link-background-active: var(--ng-select-background);
  --color-nav-link-border-hover: rgba(0, 0, 0, 0);
  --color-nav-link-text: #a0a0a0;
  --color-nav-link-text-active: #f0fff0;
  --color-nav-link-text-hover: #f0fff0;
  --color-nav-link-enabled: #258045;
  --color-nav-link-enabled-active: #22c65d;
  --color-nav-link-enabled-hover: #22c65d;
  --color-nav-link-disabled: #991d47;
  --color-nav-link-disabled-active: #c22359;
  --color-nav-link-disabled-hover: #c22359;
  --color-nav-link-unsaved: #b8ba00;
  --color-nav-link-unsaved-active: #b8ba00;
  --color-nav-link-unsaved-hover: #d9dc00;
  --color-nav-link-bg-hover: inherit;
  --height-nav-link: 20px;
  --padding-nav-link: 8px 16px;
  --padding-nav-link-expand: 0px 16px;
  --nav-link-before-margin-left: 0px;
  --img-nav-link-display: none;
  --color-nav-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-nav-scrollbar-track: rgba(80, 80, 80, 0.3);
  --height-navarea: 250px;
  --color-ng-bubbles-background: rgba(14, 131, 20, 0.4);
  --color-ng-bubbles-border: rgb(14, 131, 20);
  --color-ng-select-arrow: #c8c8c8;
  --color-ng-select-arrow-active: #c8c8c8;
  --color-ng-select-arrow-hover: #c8c8c8;
  --color-ng-select-background: #101010;
  --color-ng-select-background-active: #101010;
  --color-ng-select-background-hover: #121212;
  --color-ng-select-section-background: #101010;
  --color-ng-select-border: #0d7e35;
  --color-ng-select-border-active: rgb(12, 83, 47);
  --color-ng-select-border-hover: #1bd85e;
  --color-ng-select-option-background: #101010;
  --color-ng-select-option-background-active: #101010;
  --color-ng-select-option-background-hover: #3b3b3b;
  --color-ng-select-option-border: rgba(200, 200, 200, 0);
  --color-ng-select-option-border-active: #01ce55;
  --color-ng-select-option-border-hover: #00ff69;
  --color-ng-select-option-text: #c8c8c8;
  --color-ng-select-option-text-active: #c8c8c8;
  --color-ng-select-option-text-hover: #c8c8c8;
  --color-ng-select-text: #c8c8c8;
  --color-ng-select-text-active: #c8c8c8;
  --color-ng-select-text-hover: #c8c8c8;
  --color-ng-select-scrollbar-thumb: rgb(80, 80, 80);
  --color-ng-select-scrollbar-track: rgb(31, 31, 31);
  --ng-select-padding: 0.2em 0.1em;
  --ng-select-radius: 4px;
  --ng-select-margin: var(--margin-input-text);
  --color-ng-toggle-button-border: #159b44;
  --color-ng-toggle-button-border-active: #18ab4c;
  --color-ng-toggle-button-border-active-hover: #6feb9b;
  --color-ng-toggle-button-border-hover: #36c86a;
  --color-ng-toggle-button-button-border: #767676;
  --color-ng-toggle-button-button-border-active: #b5b8b6;
  --color-ng-toggle-button-button-border-active-hover: #e7e7e7;
  --color-ng-toggle-button-button-border-hover: #f0fff0;
  --color-ng-toggle-button-button-fill: #494949;
  --color-ng-toggle-button-button-fill-active: #b5b8b6;
  --color-ng-toggle-button-button-fill-active-hover: #e7e7e7;
  --color-ng-toggle-button-button-fill-hover: #686868;
  --color-ng-toggle-button-fill: rgba(0, 0, 0, 0);
  --color-ng-toggle-button-fill-active: #18ab4c;
  --color-ng-toggle-button-fill-active-hover: #1dde61;
  --color-ng-toggle-button-fill-hover: #2f2f2f;
  --color-ng-toggle-button-text: #a0a0a0;
  --color-parsers-menu-background: #050505;
  --color-parsers-user-form-background: rgba(29, 29, 29, 0.7);
  --color-parsers-user-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parsers-user-form-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-parsers-user-instructions-background: #0a0a0a;
  --color-parsers-user-instructions-item-background: rgba(128, 128, 128, 0.07);
  --color-parsers-user-instructions-item-code-background: #1c1c1c;
  --color-parsers-user-instructions-item-code-text: #047833;
  --color-parsers-user-instructions-item-paragraph-bold-text: #047833;
  --color-parsers-user-instructions-item-paragraph-text: #c8c8c8;
  --color-parsers-user-instructions-item-title-text: #c8c8c8;
  --color-parsers-user-instructions-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parsers-user-instructions-scrollbar-track: rgba(31, 31, 31, 0.45);
  --color-preview-background: #191919;
  --color-select-arrow-left: #8d8d8d;
  --color-select-arrow-left-active: #ffffff;
  --color-select-arrow-left-hover: #cccccc;
  --color-select-arrow-right: #8d8d8d;
  --color-select-arrow-right-active: #ffffff;
  --color-select-arrow-right-hover: #cccccc;
  --color-select-arrow-down: rgba(0, 0, 0, 0);
  --color-select-arrow-down-active: #ffffff;
  --color-select-arrow-down-hover: #9b9b9b;
  --color-preview-app-hover-background: rgba(0, 0, 0, 0.8);
  --color-preview-app-zoom-slider-text: #a0a0a0;
  --color-preview-app-zoom-slider-thumb-background: #434343;
  --color-preview-app-zoom-slider-thumb-background-focus: #1bd85e;
  --color-preview-app-zoom-slider-thumb-background-hover: #1bd85e;
  --color-preview-app-zoom-slider-track-background: rgba(0, 0, 0, 0.86);
  --color-preview-app-zoom-slider-track-background-focus: rgba(0, 0, 0, 0.86);
  --color-preview-app-zoom-slider-track-background-hover: rgba(0, 0, 0, 0.86);
  --color-preview-app-zoom-slider-track-height: 0.25em;
  --color-preview-app-zoom-slider-track-border: 0;
  --color-preview-app-zoom-slider-thumb-height: 1.5em;
  --color-preview-app-zoom-slider-thumb-width: 0.75em;
  --color-preview-app-zoom-slider-thumb-border: 0;
  --color-preview-app-zoom-slider-thumb-border-radius: 0;
  --color-preview-app-zoom-slider-thumb-margin-top: -8px;
  --color-preview-directory-background: #0c0c0c;
  --color-preview-image-border: #000000;
  --color-preview-image-downloading-background: #101010;
  --color-preview-image-downloading-border: #0ad868;
  --color-preview-image-failed-background: #101010;
  --color-preview-image-failed-border: #741227;
  --color-preview-image-not-found-background: #101010;
  --color-preview-image-not-found-border: #000000;
  --color-preview-image-retrieving-url-background: #101010;
  --color-preview-image-retrieving-url-border: #003760;
  --color-preview-menu-background: #050505;
  --color-preview-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-preview-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-preview-separator: #0b491a;
  --padding-preview-separator: 0.25em 0.25em 0.25em 1.375em;
  --color-preview-text: #a0a0a0;
  --color-preview-user-background: #0c0c0c;
  --color-preview-app-button: #8d8d8d;
  --color-preview-app-button-active: #ffffff;
  --color-preview-app-button-hover: #cccccc;
  --color-nested-form-background: rgba(29, 29, 29, 0.7);
  --color-nested-form-error-border: #560909;
  --color-nested-form-error: inherit;
  --color-nested-form-error-background: #121212;
  --margin-nested-form-error: 0.25em 0 0 0;
  --padding-nested-form-error: 0 1em;
  --color-nested-form-label: #a0a0a0;
  --color-nested-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-nested-form-scrollbar-track: rgba(80, 80, 80, 0.3);
  --font-weight-nested-form-label: normal; //
  --font-transform-nested-form-label: inherit; //
  --font-size-nested-form-label: 16px; //
  --color-settings-background: #050505;
  --color-settings-text: #a0a0a0;
  --color-success: #1bd85e;
  --color-theme-background: #0c0c0c;
  --color-theme-items-background: #181818;
  --color-theme-items-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-theme-items-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-theme-load-button-text-hover: #f0fff0;
  --color-theme-loading-background: rgba(0, 0, 0, 0.9);
  --color-theme-loading-spinner: #2780c2;
  --color-theme-menu-background: rgba(24, 24, 24, 0);
  --color-theme-rules-background: #181818;
  --color-theme-rules-item-background-active: #0c0c0c;
  --color-theme-rules-item-background-hover: #2b2b2b;
  --color-theme-rules-item-square: #ffffff;
  --color-theme-rules-item-text-active: #c8c8c8;
  --color-theme-rules-item-text-hover: #c8c8c8;
  --color-theme-text: #a0a0a0;
  --ng-text-placeholder-color: #4a4a4a;
  --color-theme-themes-background: #181818;
  --color-theme-themes-item-background: rgba(0, 0, 0, 0);
  --color-theme-themes-item-background-active: rgba(0, 0, 0, 0.35);
  --color-theme-themes-item-background-hover: rgba(55, 55, 55, 0.79);
  --color-theme-themes-item-text-active: #d6d6d6;
  --color-theme-themes-item-text-hover: #cccccc;
  --color-theme-themes-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-theme-themes-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-titlebar-background: #121212;
  --color-titlebar-close-background: rgba(0, 0, 0, 0);
  --color-titlebar-close-background-active: #b50d1b;
  --color-titlebar-close-background-hover: #e81123;
  --color-titlebar-close-text: #a0a0a0;
  --color-titlebar-close-text-active: #faf0f1;
  --color-titlebar-close-text-hover: #fdf0f1;
  --color-titlebar-maximize-background: rgba(0, 0, 0, 0);
  --color-titlebar-maximize-background-active: #333333;
  --color-titlebar-maximize-background-hover: #404040;
  --color-titlebar-maximize-text: #a0a0a0;
  --color-titlebar-maximize-text-active: #a0a0a0;
  --color-titlebar-maximize-text-hover: #a0a0a0;
  --color-titlebar-minimize-background: rgba(0, 0, 0, 0);
  --color-titlebar-minimize-background-active: #333333;
  --color-titlebar-minimize-background-hover: #404040;
  --color-titlebar-minimize-text: #a0a0a0;
  --color-titlebar-minimize-text-active: #a0a0a0;
  --color-titlebar-minimize-text-hover: #a0a0a0;
  --color-titlebar-title: #a0a0a0;
  --color-toggle-button-background: rgba(0, 0, 0, 0);
  --color-toggle-button-background-active: #137c38;
  --color-toggle-button-background-active-hover: #16ac4b;
  --color-toggle-button-background-hover: #2f2f2f;
  --color-toggle-button-border: #1db954;
  --color-toggle-button-border-active: #137c38;
  --color-toggle-button-border-active-hover: #16ac4b;
  --color-toggle-button-border-hover: #1bd85e;
  --color-toggle-button-text: #a0a0a0;
  --color-toggle-button-text-active: #f0fff0;
  --color-toggle-button-text-active-hover: #f0fff0;
  --color-toggle-button-text-hover: #f0fff0;
  --color-info-button: #03b82f;
  --color-info-button-text: #03b82f;
  --color-info-button-background: #151615;
  --color-info-button-hover: #0ade3d;
  --color-info-button-background-hover: #252725;
  --margin-info-button: 0 0.25em 0 0;
  --order-info-button: 0;
  --color-markdown-background: #0a0a0a;
  --color-markdown-blockquote-border: #0f243b;
  --color-markdown-blockquote-text: #959595;
  --color-markdown-code: #dcdcdc;
  --color-markdown-code-inline: #f5dc78;
  --color-markdown-code-background: #1e1e1e;
  --color-nav-background: inherit; //
  --color-markdown-code-scrollbar-thumb: #414141;
  --color-markdown-code-scrollbar-track: #ababab;
  --color-markdown-h1: #dcdcdc;
  --color-markdown-h2: #d2d2d2;
  --color-markdown-h3: #c8c8c8;
  --color-markdown-h4: #bebebe;
  --color-markdown-h5: #b4b4b4;
  --color-markdown-h6: #aaaaaa;
  --color-markdown-horizontal-rule: #d2d2d2;
  --color-markdown-link: #256e81;
  --color-markdown-link-active: #00546a;
  --color-markdown-link-hover: #2f9eba;
  --color-markdown-scrollbar-thumb: #272727;
  --color-markdown-scrollbar-track: #101010;
  --color-markdown-strong: #c8c8c8;
  --color-markdown-table-border: #4d4d4d;
  --color-markdown-table-row-background: #141414;
  --color-markdown-table-row-background-2n: #1a1f25;
  --color-markdown-text: #959595;
  --color-markdown-underline: #d2d2d2;
  --color-markdown-table-header: #c8c8c8;
  --color-markdown-table-scrollbar-thumb: #353535;
  --color-markdown-table-scrollbar-track: #141414;
  --font-markdown-h1: 2em;
  --font-markdown-h2: 1.5em;
  --font-markdown-h3: 1.25em;
  --font-markdown-h4: 1em;
  --font-markdown-h5: 0.875em;
  --font-markdown-h6: 0.85em;
  --margin-markdown-hx: 1.5rem 0 1rem 0;
  --color-nav-border: rgba(0, 0, 0, 0);
  --color-nav-border-drag: #249a3b;
  --display-nav-border: inherit;
  --color-parser-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parser-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-about-background: #050505;
  --color-about-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-about-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-highlight-level-0: #256e81;
  --color-highlight-level-0-hover: #2f9eba;
  --color-highlight-level-0-active: #2f9eba;
  --color-highlight-level-1: rgba(151, 24, 72, 1);
  --color-highlight-level-1-hover: rgba(216, 35, 103, 1);
  --color-highlight-level-1-active: rgba(216, 35, 103, 1);
  --color-highlight-level-2: rgba(163, 114, 29, 1);
  --color-highlight-level-2-hover: rgba(214, 150, 39, 1);
  --color-highlight-level-2-active: rgba(214, 150, 39, 1);
  --color-custom-variables-background: #050505;
  --color-custom-variables-text: #a0a0a0;
  --color-custom-variables-divider: #121212;
  --color-details-options-background: var(--color-preview-background);
  --width-preview-select-cats: 9em;
  --width-preview-select-type: 8em;
  --width-details-options: calc(0.5 * (100vw - var(--nav-width)) - 45px);
  --height-details-options: 280px;
  --height-ng-buttons: 20px;
  --position-update-notifier-left: 0;
  --position-update-notifier-right: auto;
  --position-update-notifier-bottom: 0;
  --position-update-notifier-top: auto;
  --width-update-notifier: 20vw;
  --height-update-notifier: 20vh;
  --margin-update-notifier: 0.5em 0.5em;
  --padding-update-notifier: 1em 2em;
  --color-position-update-notifier-border: var(--color-info);
  --border-update-notifier-width: var(--border-width-alert);
  --display-update: inherit;
  --position-update: absolute;
  --display-preview-title: none;
  --display-exceptions-save-status: inherit;
}

.EmuDeck {
  .not-emudeck {
    display: none !important;
  }
  .previewSpinner {
    margin-left: calc(50vw - 2.5em);
  }
  @font-face {
    font-family: "MotivaSans";
    src: url("../../assets/fonts/Raleway-Thin.ttf") format("truetype");
    font-weight: 100;
  }
  @font-face {
    font-family: "MotivaSans";
    src: url("../../assets/fonts/Raleway-Light.ttf") format("truetype");
    font-weight: 200;
  }
  @font-face {
    font-family: "MotivaSans";
    src: url("../../assets/fonts/Raleway-Regular.ttf") format("truetype");
    font-weight: 300;
  }
  @font-face {
    font-family: "MotivaSans";
    src: url("../../assets/fonts/Raleway-Medium.ttf") format("truetype");
    font-weight: 400;
  }
  @font-face {
    font-family: "MotivaSans";
    src: url("../../assets/fonts/Raleway-Black.ttf") format("truetype");
    font-weight: 600;
  }

  body {
    font-family: "MotivaSans";
    background: #222 url("../../assets/themes/emudeck/bg.png") no-repeat;
    background-size: cover;
  }

  .appOverlay {
    outline: 2px solid var(--color-preview-user-background);
    opacity: 1;

    .imageSelector {
      polyline {
        stroke-width: var(--select-arrow-left-width, 55);
      }
    }
    & > .appInfo .title {
      min-height: 20px;
      span {
        text-overflow: ellipsis;
      }
    }
    & > .appInfo > div.imageIndex {
      text-align: right !important;
      padding: 6px 8px 0 0 !important;
      font-size: calc(var(--preview-image-size) * 3em) !important;
    }
    .appButtons {
      display: flex;
      width: 100%;
    }
    .btn {
      @include button();
      @include clickButtonColor(click-button);
      display: initial;
      padding: 5px;
      flex: 1;
      font-size: 12px;
      border-radius: 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: var(--color-click-button-text-hover);
        border-color: var(--color-click-button-border-hover);
        background-color: var(--color-click-button-background-hover);

        fill: var(--color-click-button-text-hover);
      }

      &:active {
        color: var(--color-click-button-text-active);
        border-color: var(--color-click-button-border-active);
        background-color: var(--color-click-button-background-active);

        fill: var(--color-click-button-text-active);
      }
      img {
        display: none !important;
      }
    }
  }

  ng-text-input,
  ng-bubbles,
  ng-select {
    &.required,
    &.missing,
    &.filled {
      .display {
        border: 0;
      }
    }
    &.required {
      border: 1px solid var(--color--required) !important;
      &:hover,
      &:focus {
        border: 1px solid var(--color--required-hover) !important;
      }
    }
    &.missing {
      border: 1px solid var(--color--missing) !important;
      &:hover,
      &:focus {
        border: 1px solid var(--color--missing-hover) !important;
      }
    }
    &.filled {
      border: 1px solid var(--color--filled) !important;
      &:hover,
      &:focus {
        border: 1px solid var(--color--filled-hover) !important;
      }
    }
  }

  &.EmuDeck.EmuDeck.EmuDeck.EmuDeck.EmuDeck navarea nav {
    justify-content: end;
    margin: 0 10px;

    nav-link,
    nav-expand .items nav-link {
      display: inline-flex;

      @include button();
      @include clickButtonColor(click-button);

      margin-left: 18px;

      &:hover {
        color: var(--color-click-button-text-hover);
        border-color: var(--color-click-button-border-hover);
        background-color: var(--color-click-button-background-hover);

        fill: var(--color-click-button-text-hover);
      }

      &:active {
        color: var(--color-click-button-text-active);
        border-color: var(--color-click-button-border-active);
        background-color: var(--color-click-button-background-active);

        fill: var(--color-click-button-text-active);
      }
      img {
        display: none !important;
      }
    }

    nav-expand {
      margin-left: 18px;
      nav-link {
        margin-left: 0 !important;
        &:before {
          display: none !important;
        }
      }
    }
  }

  navarea {
    background: transparent;
    display: flex;
    box-sizing: border-box;

    &:not(:empty) {
      padding: 28px;
    }
  }

  &.EmuDeck.EmuDeck .ng-trigger-slideIn {
    top: 32px;
    bottom: auto;
  }

  &.EmuDeck.EmuDeck settings,
  &.EmuDeck.EmuDeck about {
    width: 94vw;
    max-width: 94vw;
    margin: 0 auto;
  }
  &.EmuDeck.EmuDeck about {
    padding-top: 0;
    margin-top: 30px;
  }

  &.EmuDeck.EmuDeck nav-parsers {
    min-height: 50vh;
    max-height: 70vh;
    .parsers {
      height: 100%;
      overflow: hidden;
      nav-expand {
        height: 100%;
        .items {
          height: 100%;
          overflow-y: auto;
          padding-bottom: 10% !important;
          display: flex;
          overflow-y: auto;
          flex-direction: row;
          width: 100%;
          margin: 0;
          padding: 0;
          flex-wrap: wrap;
          justify-content: space-between;

          .inputContainer,
          .inlineGroup.inlineGroup.inlineGroup {
            margin: 0;
          }
          .inlineGroup.inlineGroup.inlineGroup {
            align-items: baseline;
          }
          nav-link {
            border-left: 0;
            padding: 24px 26px;
            padding: 56px 15px;
            color: #444;
            transition: 0.2s;
            pointer-events: none;
            & + ng-toggle-button {
              display: none !important;
            }
            img {
              margin-right: 0;
              width: 100%;
              max-width: 120px;
              max-height: 68px;
              object-fit: contain;
            }
            small {
              font-weight: 600;
            }

            &:before {
              display: none !important;
              top: 0;
              left: 0;
              position: absolute;
              content: "";
              width: 0.5em;
              height: 100%;
              background-color: var(--color-nav-link-enabled);
              border-radius: 4px 0 0 4px;
              margin: 0 0 0 0em;
              transform: translateY(0%);
            }
            &.active,
            &:hover {
              color: #444;
            }
          }
        }
      }
    }
    //65px
    .title {
      margin-bottom: 16px;
      padding-bottom: 16px;
      overflow: hidden;
      > .inputContainer {
        margin: 0;
        > .inlineGroup.inlineGroup.inlineGroup {
          margin: 0;
          justify-content: start;
        }
      }
      .titlelink {
        padding: 0;
        width: auto;
        .content {
          padding-left: 0;
        }
      }
    }

    .item {
      background-color: rgba(255, 255, 255, 1);
      padding-right: 0px;
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 4px;
      transition: 0.8s;
      width: 15%;
      max-height: 140px;
      text-align: center;
      &.disabled {
        background-color: rgba(255, 255, 255, 0.6);
        transition: 0.8s;
      }
    }
  }

  &.EmuDeck.EmuDeck.EmuDeck.EmuDeck user-exceptions {
    grid-template-areas:
      "description description"
      "upperMenu upperMenu"
      "exceptions exceptions"
      "menu menu";

    grid-template-rows: auto auto 1fr auto;

    .upperMenu {
      max-width: 94vw;
      width: 100%;
      margin: 0 auto;
      .search {
        justify-content: left;
      }
    }

    .exception-entry {
      background-color: rgb(255, 255, 255);
      padding: 10px 14px;
      margin-bottom: 10px;
      margin-right: 10px;
      border-radius: 4px;
      transition: 0.8s;
      .text {
        color: #444;
      }
      .inputContainer {
        margin-bottom: 0;
        & > div:nth-child(4) {
          display: none;
        }
      }
    }

    //Only Emudeck
    .description {
      grid-area: description;
      color: #fff;
      max-width: 94vw;
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      h1 {
        line-height: 1.25;
        margin-top: 0;
        margin: var(--margin-markdown-hx);
        padding-bottom: 0.3em;
        font-size: var(--font-markdown-h1);
        font-family: var(--font-family-markdown-h1);
        color: var(--color-markdown-h1);
      }
      p {
        color: var(--color-markdown-text);
      }
    }

    markdown {
      display: none;
    }

    .userExceptions {
      max-width: 94vw;
      width: 100%;
      margin: 0 auto;
      .addItem {
        display: none;
      }
      label {
        display: none;
      }
      label + div {
        display: block;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      > div > div {
        margin-bottom: 16px;
        // max-width: 40vw;
        width: 100%;
      }
    }

    .menu {
      display: flex;
      justify-content: end;
      padding: 28px;
      background: transparent;
      border: 0;
      nav-link {
        margin: 0 0.25em;
        @include button();
        @include clickButtonColor(click-button);
      }
    }
  }

  &.EmuDeck.EmuDeck log {
    grid-template-areas:
      "options messages bugreport"
      "options messages bugreport"
      "menu menu menu";
    .menu {
      margin: 0;
      padding: 28px;
      border: 0;
      justify-content: end;
      background: transparent;
    }
    .messages {
      padding: 24px;
      background: rgba(0, 0, 0, 0.6);
    }

    .bugreportdocs {
      display: none;
    }
  }

  &.EmuDeck.EmuDeck preview {
    // grid-template-areas:  "lowerMenu" "upperMenu" "entries";
    // grid-template-rows: auto  auto 1fr;
    position: relative;

    .excludes {
      grid-area: lowerMenu;
      box-sizing: border-box;
      padding: 28px;
      background: var(--color-preview-menu-background);
      border: 0;
      .buttonGroup {
        margin-right: 0;
        .dangerousButton + .excludeButton {
          margin-right: 0 !important;
        }
      }
    }

    .preview-description {
      padding: 0;
      padding-top: 30px;
    }

    .entries {
      background: var(--color-preview-menu-background) !important;
      z-index: 2;
    }
    .lowerMenu {
      justify-content: end;
      padding: 28px;
      background: var(--color-preview-menu-background);
      border: 0;
    }
  }

  &.EmuDeck.EmuDeck settings {
    grid-template-areas: "settings settings" "menu menu";
    markdown {
      display: none;
    }

    .settings {
      padding: 0;
      margin-top: 30px;

      .inputContainer {
        padding-left: 0;
      }

      .section {
        margin: 0;
      }
      label {
        font-size: 50px;
        font-weight: bold;
        color: #fff;
      }
    }
    .menu {
      display: none;
    }
  }

  --grid-app: "titlebar" "route" "navarea";
  --grid-app-rows: auto 1fr auto;
  --grid-app-columns: auto;
  --color--accent: rgb(49, 160, 244);
  --color--required: var(--color--accent);
  --color--required-hover: var(--color--required);
  --color--missing: var(--color-error);
  --color--missing-hover: var(--color--missing);
  --color--filled: #59da8f;
  --color--filled-hover: var(--color--filled);
  --nav-width: 100vw;
  --nav-width-max: 100vw;
  --nav-direction: row;
  --nav-parsers-display: none;
  --color-alert-background: #101418;
  --color-alert-text: #fff;
  --border-width-alert: 0 0 0 4px;
  --color-app-loading-spinner: var(--color--accent);
  --color-click-button-background: var(--color-ng-select-background);
  --color-click-button-background-active: ;
  --color-click-button-background-disabled: #414141;
  --color-click-button-background-hover: var(--color--accent);
  --color-click-button-border: transparent;
  --color-click-button-border-active: transparent;
  --color-click-button-border-disabled: transparent;
  --color-click-button-border-hover: transparent;
  --color-click-button-text: #a0a0a0;
  --color-click-button-text-active: #f0fff0;
  --color-click-button-text-disabled: #9f9f9f;
  --color-click-button-text-hover: #f0fff0;
  --padding-click-button: 14px 24px;
  --radius-click-button: 34px;
  --color-dangerous-click-button-background: #b91d24;
  --color-dangerous-click-button-background-active: #941722;
  --color-dangerous-click-button-background-disabled: #414141;
  --color-dangerous-click-button-background-hover: #d81b33;
  --color-dangerous-click-button-border: #b91d24;
  --color-dangerous-click-button-border-active: #941722;
  --color-dangerous-click-button-border-disabled: #121212;
  --color-dangerous-click-button-border-hover: #d81b33;
  --color-dangerous-click-button-text: #f0fff0;
  --color-dangerous-click-button-text-active: #f0fff0;
  --color-dangerous-click-button-text-disabled: #9f9f9f;
  --color-dangerous-click-button-text-hover: #f0fff0;
  --color-error: #d81b5e;
  --color-fuzzy: #551a8b;
  --color-info: #1b5ed8;
  --color-input-background: var(--color-ng-select-background);
  --color-input-background-disabled: blue;
  --color-input-background-focus: #fff;
  --color-input-background-hover: var(--color-ng-select-background);
  --color-input-border: transparent;
  --color-input-border-disabled: transparent;
  --color-input-border-focus: transparent;
  --color-input-border-hover: transparent;
  --color-input-shadow: rgba(0, 0, 0, 0);
  --color-input-shadow-disabled: rgba(0, 0, 0, 0);
  --color-input-shadow-focus: rgba(0, 0, 0, 0);
  --color-input-shadow-hover: rgba(0, 0, 0, 0);
  --color-input-text: #fff;
  --color-input-text-disabled: #a0a0a0;
  --color-input-text-focus: #040404;
  --color-input-text-hover: var(--color-input-text);
  --margin-input-text-hover: #040404;
  --padding-input-text: var(--ng-select-padding);
  --margin-input-text: 16px;
  --color-logger-menu-background: #050505;
  --color-logger-messages-background: var(--color-markdown-background);
  --color-logger-messages-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-logger-messages-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-logger-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-logger-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-logger-bugreport-background: var(--color-nested-form-background);
  --color-logger-messages-text: #c8c8c8;
  --color-logger-reportid: rgb(200, 200, 0);
  --color-main-background: #0a1723;
  --color-nav-background: #121212;
  --color-nav-link-border: rgba(0, 0, 0, 0);
  --color-nav-link-border-active: transparent;
  --color-nav-link-background-active: var(--ng-select-background);
  --color-nav-link-border-hover: rgba(0, 0, 0, 0);
  --color-nav-link-text: #fff;
  --color-nav-link-text-active: #fff;
  --color-nav-link-text-hover: #fff;
  --color-nav-link-enabled: #258045;
  --color-nav-link-enabled-active: #22c65d;
  --color-nav-link-enabled-hover: #22c65d;
  --color-nav-link-disabled: #991d47;
  --color-nav-link-disabled-active: #c22359;
  --color-nav-link-disabled-hover: #c22359;
  --color-nav-link-unsaved: #b8ba00;
  --color-nav-link-unsaved-active: #b8ba00;
  --color-nav-link-unsaved-hover: #d9dc00;
  --color-nav-link-background-active: var(--color--accent);
  --color-nav-link-bg-hover: var(--color-nav-link-background-active);
  --padding-nav-link: 0;
  --padding-nav-link-expand: 0px;
  --nav-link-before-margin-left: 0px;
  --height-nav-link: 100%;
  --img-nav-link-display: inline-block;
  --color-nav-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-nav-scrollbar-track: rgba(80, 80, 80, 0.3);
  --height-navarea: auto;
  --color-ng-bubbles-background: rgba(49, 160, 244, 0.4);
  --color-ng-bubbles-border: rgb(49, 160, 244);
  --color-ng-select-arrow: #c8c8c8;
  --color-ng-select-arrow-active: #c8c8c8;
  --color-ng-select-arrow-hover: #c8c8c8;
  --color-ng-select-background: #33373c;
  --color-ng-select-background-active: #f5f5f5;
  --color-ng-select-background-hover: #f5f5f5;
  --color-ng-select-section-background: var(--color-ng-select-background);;
  --color-ng-select-border: transparent;
  --color-ng-select-border-active: transparent;
  --color-ng-select-border-hover: transparent;
  --color-ng-select-option-background: var(--color-ng-select-background);
  --color-ng-select-option-background-active: var(--color--accent);
  --color-ng-select-option-background-hover: #fff;
  --color-ng-select-option-border: transparent;
  --color-ng-select-option-border-active: transparent;
  --color-ng-select-option-border-hover: transparent;
  --color-ng-select-option-text: #c8c8c8;
  --color-ng-select-option-text-active: #fff;
  --color-ng-select-option-text-hover: #040404;
  --color-ng-select-text: #c8c8c8;
  --color-ng-select-text-active: #c8c8c8;
  --color-ng-select-text-hover: #c8c8c8;
  --color-ng-select-scrollbar-thumb: rgb(80, 80, 80);
  --color-ng-select-scrollbar-track: rgb(31, 31, 31);
  --ng-select-padding: 10px 20px; //
  --ng-select-radius: 4px; //
  --ng-select-margin: var(--margin-input-text); //
  --ng-select-border-width: 0px;
  --color-ng-toggle-button-border: #383e46;
  --color-ng-toggle-button-border-active: var(--color--accent);
  --color-ng-toggle-button-border-active-hover: #81868b;
  --color-ng-toggle-button-border-hover: #81868b;
  --color-ng-toggle-button-button-border: #767676;
  --color-ng-toggle-button-button-border-active: #b5b8b6;
  --color-ng-toggle-button-button-border-active-hover: #81868b;
  --color-ng-toggle-button-button-border-hover: #f0fff0;
  --color-ng-toggle-button-button-fill: #fff;
  --color-ng-toggle-button-button-fill-active: #fff;
  --color-ng-toggle-button-button-fill-active-hover: #fff;
  --color-ng-toggle-button-button-fill-hover: #fff;
  --color-ng-toggle-button-fill: #383e46;
  --color-ng-toggle-button-fill-active: var(--color--accent);
  --color-ng-toggle-button-fill-active-hover: var(--color--accent);
  --color-ng-toggle-button-fill-hover: #2f2f2f;
  --color-ng-toggle-button-text: #a0a0a0;
  --color-parsers-menu-background: transparent;
  --color-parsers-user-form-background: rgba(29, 29, 29, 0.7);
  --color-parsers-user-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parsers-user-form-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-parsers-user-instructions-background: #0a0a0a;
  --color-parsers-user-instructions-item-background: rgba(128, 128, 128, 0.07);
  --color-parsers-user-instructions-item-code-background: #1c1c1c;
  --color-parsers-user-instructions-item-code-text: #047833;
  --color-parsers-user-instructions-item-paragraph-bold-text: #047833;
  --color-parsers-user-instructions-item-paragraph-text: #c8c8c8;
  --color-parsers-user-instructions-item-title-text: #c8c8c8;
  --color-parsers-user-instructions-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parsers-user-instructions-scrollbar-track: rgba(31, 31, 31, 0.45);
  --color-preview-background: inherit;
  --color-select-arrow-left: #fff;
  --color-select-arrow-left-active: #ffffff;
  --color-select-arrow-left-hover: #cccccc;
  --color-select-arrow-right: #fff;
  --color-select-arrow-right-active: #ffffff;
  --color-select-arrow-right-hover: #cccccc;
  --color-select-arrow-down: rgba(0, 0, 0, 0);
  --color-select-arrow-down-active: #ffffff;
  --color-select-arrow-down-hover: #9b9b9b;
  --color-preview-app-hover-background: rgba(0, 0, 0, 0.2);
  --color-preview-app-zoom-slider-text: #a0a0a0;
  --color-preview-app-zoom-slider-thumb-background: #fff;
  --color-preview-app-zoom-slider-thumb-background-focus: #fff;
  --color-preview-app-zoom-slider-thumb-background-hover: #fff;
  --color-preview-app-zoom-slider-track-background: var(--color--accent);
  --color-preview-app-zoom-slider-track-background-focus: var(--color--accent);
  --color-preview-app-zoom-slider-track-background-hover: var(--color--accent);
  --color-preview-app-zoom-slider-track-height: 0.25em;
  --color-preview-app-zoom-slider-track-border: 0;
  --color-preview-app-zoom-slider-thumb-height: 18px;
  --color-preview-app-zoom-slider-thumb-width: 18px;
  --color-preview-app-zoom-slider-thumb-border: 0;
  --color-preview-app-zoom-slider-thumb-border-radius: 100%;
  --color-preview-app-zoom-slider-thumb-margin-top: -7px;
  --color-preview-directory-background: #0c0c0c;
  --color-preview-image-border: #000000;
  --color-preview-image-downloading-background: #101010;
  --color-preview-image-downloading-border: #0ad868;
  --color-preview-image-failed-background: #101010;
  --color-preview-image-failed-border: #741227;
  --color-preview-image-not-found-background: #101010;
  --color-preview-image-not-found-border: #000000;
  --color-preview-image-retrieving-url-background: #101010;
  --color-preview-image-retrieving-url-border: #003760;
  --color-preview-menu-background: rgba(0, 0, 0, 0.6);
  --color-preview-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-preview-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-preview-separator: transparent;
  --padding-preview-separator: 18px;
  --color-preview-text: var(--color-nav-link-text-active);
  --color-preview-user-background: rgb(128, 193, 243);
  --color-preview-app-button: #8d8d8d;
  --color-preview-app-button-active: #ffffff;
  --color-preview-app-button-hover: #cccccc;
  --color-nested-form-background: transparent;
  --color-nested-form-error-border: #560909;
  --color-nested-form-error: inherit;
  --color-nested-form-error-background: inherit;
  --margin-nested-form-error: 0 0 0 0;
  --padding-nested-form-error: 0 1em;
  --color-nested-form-label: transparent;
  --color-nested-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-nested-form-scrollbar-track: rgba(80, 80, 80, 0.3);
  --font-weight-nested-form-label: normal; //
  --font-transform-nested-form-label: uppercase; //
  --font-size-nested-form-label: 14px; //
  --color-settings-background: inherit;
  --color-settings-text: #a0a0a0;
  --color-success: #1bd85e;
  --color-theme-background: #0c0c0c;
  --color-theme-items-background: #181818;
  --color-theme-items-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-theme-items-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-theme-load-button-text-hover: #f0fff0;
  --color-theme-loading-background: rgba(0, 0, 0, 0.9);
  --color-theme-loading-spinner: #2780c2;
  --color-theme-menu-background: rgba(24, 24, 24, 0);
  --color-theme-rules-background: #181818;
  --color-theme-rules-item-background-active: #0c0c0c;
  --color-theme-rules-item-background-hover: #2b2b2b;
  --color-theme-rules-item-square: #ffffff;
  --color-theme-rules-item-text-active: #c8c8c8;
  --color-theme-rules-item-text-hover: #c8c8c8;
  --color-theme-text: #a0a0a0;
  --ng-text-placeholder-color: #656565;
  --color-theme-themes-background: #181818;
  --color-theme-themes-item-background: rgba(0, 0, 0, 0);
  --color-theme-themes-item-background-active: rgba(0, 0, 0, 0.35);
  --color-theme-themes-item-background-hover: rgba(55, 55, 55, 0.79);
  --color-theme-themes-item-text-active: #d6d6d6;
  --color-theme-themes-item-text-hover: #cccccc;
  --color-theme-themes-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-theme-themes-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-titlebar-background: #121212;
  --color-titlebar-close-background: rgba(0, 0, 0, 0);
  --color-titlebar-close-background-active: #b50d1b;
  --color-titlebar-close-background-hover: #e81123;
  --color-titlebar-close-text: #a0a0a0;
  --color-titlebar-close-text-active: #faf0f1;
  --color-titlebar-close-text-hover: #fdf0f1;
  --color-titlebar-maximize-background: rgba(0, 0, 0, 0);
  --color-titlebar-maximize-background-active: #333333;
  --color-titlebar-maximize-background-hover: #404040;
  --color-titlebar-maximize-text: #a0a0a0;
  --color-titlebar-maximize-text-active: #a0a0a0;
  --color-titlebar-maximize-text-hover: #a0a0a0;
  --color-titlebar-minimize-background: rgba(0, 0, 0, 0);
  --color-titlebar-minimize-background-active: #333333;
  --color-titlebar-minimize-background-hover: #404040;
  --color-titlebar-minimize-text: #a0a0a0;
  --color-titlebar-minimize-text-active: #a0a0a0;
  --color-titlebar-minimize-text-hover: #a0a0a0;
  --color-titlebar-title: #a0a0a0;
  --color-toggle-button-background: #fff;
  --color-toggle-button-background-active: var(--color--accent);
  --color-toggle-button-background-active-hover: var(--color--accent);
  --color-toggle-button-background-hover: var(--color--accent);
  --color-toggle-button-border: transparent;
  --color-toggle-button-border-active: transparent;
  --color-toggle-button-border-active-hover: transparent;
  --color-toggle-button-border-hover: transparent;
  --color-toggle-button-text: #a0a0a0;
  --color-toggle-button-text-active: #f0fff0;
  --color-toggle-button-text-active-hover: #f0fff0;
  --color-toggle-button-text-hover: #f0fff0;
  --color-info-button: var(--color--accent);
  --color-info-button-text: #040404;
  --color-info-button-background: var(--color--accent);
  --color-info-button-hover: var(--color--accent);
  --color-info-button-background-hover: var(--color--accent);
  --margin-info-button: 0 0 0 10px;
  --order-info-button: 2;
  --color-markdown-background: transparent;
  --color-markdown-blockquote-border: #0f243b;
  --color-markdown-blockquote-text: #959595;
  --color-markdown-code: #dcdcdc;
  --color-markdown-code-inline: #f5dc78;
  --color-markdown-code-background: #1e1e1e;
  --color-markdown-code-scrollbar-thumb: #414141;
  --color-markdown-code-scrollbar-track: #ababab;
  --color-markdown-h1: #fff;
  --color-markdown-h2: #fff;
  --color-markdown-h3: #fff;
  --color-markdown-h4: #fff;
  --color-markdown-h5: #fff;
  --color-markdown-h6: #fff;
  --color-markdown-horizontal-rule: #d2d2d2;
  --color-markdown-link: #256e81;
  --color-markdown-link-active: #00546a;
  --color-markdown-link-hover: #2f9eba;
  --color-markdown-scrollbar-thumb: #272727;
  --color-markdown-scrollbar-track: #101010;
  --color-markdown-strong: #c8c8c8;
  --color-markdown-table-border: #4d4d4d;
  --color-markdown-table-row-background: #141414;
  --color-markdown-table-row-background-2n: #1a1f25;
  --color-markdown-text: #959595;
  --color-markdown-underline: transparent;
  --color-markdown-table-header: #c8c8c8;
  --color-markdown-table-scrollbar-thumb: #353535;
  --color-markdown-table-scrollbar-track: #141414;
  --font-family-markdown-h1: "MotivaSans";
  --font-markdown-h1: 50px;
  --font-markdown-h2: 1.25em;
  --font-markdown-h3: 1em;
  --font-markdown-h4: 1em;
  --font-markdown-h5: 0.875em;
  --font-markdown-h6: 0.85em;
  --margin-markdown-hx: 3rem 0 1rem 0;
  --color-nav-border: rgba(0, 0, 0, 0);
  --color-nav-border-drag: black;
  --color-nav-background: #32353d; //
  --display-nav-border: none;
  --height-nav-area: 260px;
  --height-ng-buttons: 50%;
  --color-parser-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parser-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-about-background: inherit;
  --color-about-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-about-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-highlight-level-0: #256e81;
  --color-highlight-level-0-hover: #2f9eba;
  --color-highlight-level-0-active: #2f9eba;
  --color-highlight-level-1: rgba(151, 24, 72, 1);
  --color-highlight-level-1-hover: rgba(216, 35, 103, 1);
  --color-highlight-level-1-active: rgba(216, 35, 103, 1);
  --color-highlight-level-2: rgba(163, 114, 29, 1);
  --color-highlight-level-2-hover: rgba(214, 150, 39, 1);
  --color-highlight-level-2-active: rgba(214, 150, 39, 1);
  --color-custom-variables-background: #050505;
  --color-details-options-background: rgb(0, 0, 0);
  --color-custom-variables-text: #a0a0a0;
  --color-custom-variables-divider: #121212;
  --width-details-options: calc(50vw - 44px);
  --height-details-options: 380px;

  --width-preview-select-cats: 12em;
  --width-preview-select-type: 10em;
  --position-update-notifier-left: 0;
  --position-update-notifier-right: 0;
  --position-update-notifier-bottom: 0;
  --position-update-notifier-top: 0;
  --margin-update-notifier: auto;
  --padding-update-notifier: 1em 2em;
  --width-update-notifier-backdrop: 100vw;
  --height-update-notifier-backdrop: 100vh;
  --position-update-notifier-backdrop: fixed;
  --filter-update-notifier-backdrop: blur(5px);
  --width-update-notifier: auto;
  --height-update-notifier: auto;
  --color-position-update-notifier-border: #414141;
  --border-update-notifier-width: 1px;
  --display-update: flex;
  --position-update: static;
  --display-preview-title: none;
}

.Deck {
  .only-emudeck {
    display: none !important;
  }
  .only-deck {
    display: block !important;
  }
  .not-deck {
    display: none !important;
  }
  .previewSpinner {
    margin-left: calc(0.5 * (100vw - var(--nav-width)) - 2.5em);
  }
  ng-text-input,
  ng-bubbles,
  ng-select {
    &.required,
    &.missing,
    &.filled {
      .display {
        border: 0;
      }
    }
    &.required {
      border-left: 4px solid var(--color--required) !important;
    }
    &.missing {
      border-left: 4px solid var(--color--missing) !important;
    }
    &.filled {
      border-left: 4px solid var(--color--filled) !important;
    }
  }
  --grid-app: "titlebar titlebar titlebar" "navarea navborder route";
  --grid-app-rows: auto 1fr;
  --grid-app-columns: auto auto 1fr;
  --color--accent: #31a0f4;
  --color--required: var(--color--accent);
  --color--missing: var(--color-error);
  --color--filled: #59da8f;
  --nav-width: 20vw;
  --nav-width-max: 100vw;
  --nav-direction: column;
  --nav-parsers-display: flex;
  --color-alert-background: #101418;
  --color-alert-text: #fff;
  --border-width-alert: 0 0 0 4px;
  --color-app-loading-spinner: var(--color--accent);
  --color-click-button-background: var(--color-ng-select-background);
  --color-click-button-background-active: ;
  --color-click-button-background-disabled: #414141;
  --color-click-button-background-hover: var(--color--accent);
  --color-click-button-border: transparent;
  --color-click-button-border-active: transparent;
  --color-click-button-border-disabled: transparent;
  --color-click-button-border-hover: transparent;
  --color-click-button-text: #a0a0a0;
  --color-click-button-text-active: #f0fff0;
  --color-click-button-text-disabled: #9f9f9f;
  --color-click-button-text-hover: #f0fff0;
  --padding-click-button: 8px 32px;
  --radius-click-button: 4px;
  --color-dangerous-click-button-background: #b91d24;
  --color-dangerous-click-button-background-active: #941722;
  --color-dangerous-click-button-background-disabled: #414141;
  --color-dangerous-click-button-background-hover: #d81b33;
  --color-dangerous-click-button-border: #b91d24;
  --color-dangerous-click-button-border-active: #941722;
  --color-dangerous-click-button-border-disabled: #121212;
  --color-dangerous-click-button-border-hover: #d81b33;
  --color-dangerous-click-button-text: #f0fff0;
  --color-dangerous-click-button-text-active: #f0fff0;
  --color-dangerous-click-button-text-disabled: #9f9f9f;
  --color-dangerous-click-button-text-hover: #f0fff0;
  --color-error: #d81b5e;
  --color-fuzzy: #551a8b;
  --color-info: #1b5ed8;
  --color-input-background: var(--color-ng-select-background);
  --color-input-background-disabled: blue;
  --color-input-background-focus: #fff;
  --color-input-background-hover: var(--color-ng-select-background);
  --color-input-border: transparent;
  --color-input-border-disabled: transparent;
  --color-input-border-focus: transparent;
  --color-input-border-hover: transparent;
  --color-input-shadow: rgba(0, 0, 0, 0);
  --color-input-shadow-disabled: rgba(0, 0, 0, 0);
  --color-input-shadow-focus: rgba(0, 0, 0, 0);
  --color-input-shadow-hover: rgba(0, 0, 0, 0);
  --color-input-text: #fff;
  --color-input-text-disabled: #a0a0a0;
  --color-input-text-focus: #040404;
  --color-input-text-hover: var(--color-input-text);
  --margin-input-text-hover: #040404;
  --padding-input-text: var(--ng-select-padding);
  --margin-input-text: 16px;
  --color-logger-menu-background: #050505;
  --color-logger-messages-background: var(--color-nested-form-background);
  --color-logger-messages-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-logger-messages-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-logger-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-logger-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-logger-bugreport-background: var(--color-nested-form-background);
  --color-logger-messages-text: #c8c8c8;
  --color-logger-reportid: rgb(200, 200, 0);
  --color-main-background: #0a1723;
  --color-nav-background: #121212;
  --color-nav-link-border: rgba(0, 0, 0, 0);
  --color-nav-link-border-active: transparent;
  --color-nav-link-border-hover: rgba(0, 0, 0, 0);
  --color-nav-link-background-active: var(--ng-select-background);
  --color-nav-link-text: #cccfd4;
  --color-nav-link-text-active: #f0fff0;
  --color-nav-link-text-hover: #f0fff0;
  --color-nav-link-enabled: var(--color--filled);
  --color-nav-link-enabled-active: var(--color--filled);
  --color-nav-link-enabled-hover: var(--color--filled);
  --color-nav-link-disabled: var(--color--missing);
  --color-nav-link-disabled-active: var(--color--missing);
  --color-nav-link-disabled-hover:var(--color--missing);
  --color-nav-link-unsaved: var(--color-nested-form-error-border);
  --color-nav-link-unsaved-active: var(--color-nested-form-error-border);
  --color-nav-link-unsaved-hover: var(--color-nested-form-error-border);
  --color-nav-link-background-active: #4f596b;
  --color-nav-link-bg-hover: transparent;
  --padding-nav-link: 16px;
  --padding-nav-link-expand: 0px;
  --nav-link-before-margin-left: -10px;
  --height-nav-link: 1.2em;
  --img-nav-link-display: inline-block;
  --color-nav-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-nav-scrollbar-track: rgba(80, 80, 80, 0.3);
  --height-navarea: 360px;
  --color-ng-bubbles-background: rgba(49, 160, 244, 0.4);
  --color-ng-bubbles-border: rgb(49, 160, 244);
  --color-ng-select-arrow: #c8c8c8;
  --color-ng-select-arrow-active: #c8c8c8;
  --color-ng-select-arrow-hover: #c8c8c8;
  --color-ng-select-background: #33373c;
  --color-ng-select-background-active: #f5f5f5;
  --color-ng-select-background-hover: #f5f5f5;
  --color-ng-select-section-background: var(--color-nav-link-background-active);
  --color-ng-select-border: transparent;
  --color-ng-select-border-active: transparent;
  --color-ng-select-border-hover: transparent;
  --color-ng-select-option-background: var(--color-ng-select-background);
  --color-ng-select-option-background-active: var(--color--accent);
  --color-ng-select-option-background-hover: #fff;
  --color-ng-select-option-border: transparent;
  --color-ng-select-option-border-active: transparent;
  --color-ng-select-option-border-hover: transparent;
  --color-ng-select-option-text: #fff;
  --color-ng-select-option-text-active: #fff;
  --color-ng-select-option-text-hover: #040404;
  --color-ng-select-text: #fff;
  --color-ng-select-text-active: #040404;
  --color-ng-select-text-hover: #fff;
  --color-ng-select-scrollbar-thumb: rgb(80, 80, 80);
  --color-ng-select-scrollbar-track: rgb(31, 31, 31);
  --ng-select-padding: 10px 20px; //
  --ng-select-radius: 4px; //
  --ng-select-margin: var(--margin-input-text); //
  --ng-select-border-width: 0px;
  --color-ng-toggle-button-border: #383e46;
  --color-ng-toggle-button-border-active: var(--color--accent);
  --color-ng-toggle-button-border-active-hover: #81868b;
  --color-ng-toggle-button-border-hover: #81868b;
  --color-ng-toggle-button-button-border: #767676;
  --color-ng-toggle-button-button-border-active: #b5b8b6;
  --color-ng-toggle-button-button-border-active-hover: #81868b;
  --color-ng-toggle-button-button-border-hover: #f0fff0;
  --color-ng-toggle-button-button-fill: #fff;
  --color-ng-toggle-button-button-fill-active: #fff;
  --color-ng-toggle-button-button-fill-active-hover: #fff;
  --color-ng-toggle-button-button-fill-hover: #fff;
  --color-ng-toggle-button-fill: #383e46;
  --color-ng-toggle-button-fill-active: var(--color--accent);
  --color-ng-toggle-button-fill-active-hover: var(--color--accent);
  --color-ng-toggle-button-fill-hover: #2f2f2f;
  --color-ng-toggle-button-text: #a0a0a0;
  --color-parsers-menu-background: #050505;
  --color-parsers-user-form-background: rgba(29, 29, 29, 0.7);
  --color-parsers-user-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parsers-user-form-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-parsers-user-instructions-background: #0a0a0a;
  --color-parsers-user-instructions-item-background: rgba(128, 128, 128, 0.07);
  --color-parsers-user-instructions-item-code-background: #1c1c1c;
  --color-parsers-user-instructions-item-code-text: #047833;
  --color-parsers-user-instructions-item-paragraph-bold-text: #047833;
  --color-parsers-user-instructions-item-paragraph-text: #c8c8c8;
  --color-parsers-user-instructions-item-title-text: #c8c8c8;
  --color-parsers-user-instructions-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parsers-user-instructions-scrollbar-track: rgba(31, 31, 31, 0.45);
  --color-preview-background: var(--color-nested-form-background);
  --color-select-arrow-left: #fff;
  --color-select-arrow-left-active: #ffffff;
  --color-select-arrow-left-hover: #cccccc;
  --color-select-arrow-right: #fff;
  --color-select-arrow-right-active: #ffffff;
  --color-select-arrow-right-hover: #cccccc;
  --color-select-arrow-down: rgba(0, 0, 0, 0);
  --color-select-arrow-down-active: #ffffff;
  --color-select-arrow-down-hover: #9b9b9b;
  --color-preview-app-hover-background: rgba(0, 0, 0, 0.2);
  --color-preview-app-zoom-slider-text: #a0a0a0;
  --color-preview-app-zoom-slider-thumb-background: #fff;
  --color-preview-app-zoom-slider-thumb-background-focus: #fff;
  --color-preview-app-zoom-slider-thumb-background-hover: #fff;
  --color-preview-app-zoom-slider-track-background: var(--color--accent);
  --color-preview-app-zoom-slider-track-background-focus: var(--color--accent);
  --color-preview-app-zoom-slider-track-background-hover: var(--color--accent);
  --color-preview-app-zoom-slider-track-height: 0.25em;
  --color-preview-app-zoom-slider-track-border: 0;
  --color-preview-app-zoom-slider-thumb-height: 18px;
  --color-preview-app-zoom-slider-thumb-width: 18px;
  --color-preview-app-zoom-slider-thumb-border: 0;
  --color-preview-app-zoom-slider-thumb-border-radius: 100%;
  --color-preview-app-zoom-slider-thumb-margin-top: -7px;
  --color-preview-directory-background: #0c0c0c;
  --color-preview-image-border: #000000;
  --color-preview-image-downloading-background: #101010;
  --color-preview-image-downloading-border: #0ad868;
  --color-preview-image-failed-background: #101010;
  --color-preview-image-failed-border: #741227;
  --color-preview-image-not-found-background: #101010;
  --color-preview-image-not-found-border: #000000;
  --color-preview-image-retrieving-url-background: #101010;
  --color-preview-image-retrieving-url-border: #003760;
  --color-preview-menu-background: #050505;
  --color-preview-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-preview-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-preview-separator: transparent;
  --padding-preview-separator: 18px;
  --color-preview-text: var(--color-nav-link-text-active);
  --color-preview-user-background: var(--color-nav-link-background-active);
  --color-preview-app-button: #8d8d8d;
  --color-preview-app-button-active: #ffffff;
  --color-preview-app-button-hover: #cccccc;
  --color-nested-form-background: rgba(29, 29, 29, 1);
  --color-nested-form-error-border: #fbfd81;
  --color-nested-form-error: inherit;
  --color-nested-form-error-background: inherit;
  --margin-nested-form-error: 0 0 0 0;
  --padding-nested-form-error: 0 1em;
  --color-nested-form-label: #a0a0a0;
  --color-nested-form-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-nested-form-scrollbar-track: rgba(80, 80, 80, 0.3);
  --font-weight-nested-form-label: normal; //
  --font-transform-nested-form-label: uppercase; //
  --font-size-nested-form-label: 14px; //
  --color-settings-background: inherit;
  --color-settings-text: #a0a0a0;
  --color-success: #1bd85e;
  --color-theme-background: #0c0c0c;
  --color-theme-items-background: #181818;
  --color-theme-items-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-theme-items-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-theme-load-button-text-hover: #f0fff0;
  --color-theme-loading-background: rgba(0, 0, 0, 0.9);
  --color-theme-loading-spinner: #2780c2;
  --color-theme-menu-background: rgba(24, 24, 24, 0);
  --color-theme-rules-background: #181818;
  --color-theme-rules-item-background-active: #0c0c0c;
  --color-theme-rules-item-background-hover: #2b2b2b;
  --color-theme-rules-item-square: #ffffff;
  --color-theme-rules-item-text-active: #c8c8c8;
  --color-theme-rules-item-text-hover: #c8c8c8;
  --color-theme-text: #a0a0a0;
  --ng-text-placeholder-color: #656565;
  --color-theme-themes-background: #181818;
  --color-theme-themes-item-background: rgba(0, 0, 0, 0);
  --color-theme-themes-item-background-active: rgba(0, 0, 0, 0.35);
  --color-theme-themes-item-background-hover: rgba(55, 55, 55, 0.79);
  --color-theme-themes-item-text-active: #d6d6d6;
  --color-theme-themes-item-text-hover: #cccccc;
  --color-theme-themes-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-theme-themes-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-titlebar-background: #121212;
  --color-titlebar-close-background: rgba(0, 0, 0, 0);
  --color-titlebar-close-background-active: #b50d1b;
  --color-titlebar-close-background-hover: #e81123;
  --color-titlebar-close-text: #a0a0a0;
  --color-titlebar-close-text-active: #faf0f1;
  --color-titlebar-close-text-hover: #fdf0f1;
  --color-titlebar-maximize-background: rgba(0, 0, 0, 0);
  --color-titlebar-maximize-background-active: #333333;
  --color-titlebar-maximize-background-hover: #404040;
  --color-titlebar-maximize-text: #a0a0a0;
  --color-titlebar-maximize-text-active: #a0a0a0;
  --color-titlebar-maximize-text-hover: #a0a0a0;
  --color-titlebar-minimize-background: rgba(0, 0, 0, 0);
  --color-titlebar-minimize-background-active: #333333;
  --color-titlebar-minimize-background-hover: #404040;
  --color-titlebar-minimize-text: #a0a0a0;
  --color-titlebar-minimize-text-active: #a0a0a0;
  --color-titlebar-minimize-text-hover: #a0a0a0;
  --color-titlebar-title: #a0a0a0;
  --color-toggle-button-background: #fff;
  --color-toggle-button-background-active: var(--color--accent);
  --color-toggle-button-background-active-hover: #9ed2fa;
  --color-toggle-button-background-hover: #9ed2fa;
  --color-toggle-button-border: transparent;
  --color-toggle-button-border-active: transparent;
  --color-toggle-button-border-active-hover: transparent;
  --color-toggle-button-border-hover: transparent;
  --color-toggle-button-text: #a0a0a0;
  --color-toggle-button-text-active: #f0fff0;
  --color-toggle-button-text-active-hover: #f0fff0;
  --color-toggle-button-text-hover: #f0fff0;
  --color-info-button: var(--color--accent);
  --color-info-button-text: #040404;
  --color-info-button-background: var(--color--accent);
  --color-info-button-hover: var(--color--accent);
  --color-info-button-background-hover: var(--color--accent);
  --margin-info-button: 0 0 0 10px;
  --order-info-button: 2;
  --color-markdown-background: transparent;
  --color-markdown-blockquote-border: #0f243b;
  --color-markdown-blockquote-text: #959595;
  --color-markdown-code: #dcdcdc;
  --color-markdown-code-inline: #f5dc78;
  --color-markdown-code-background: #1e1e1e;
  --color-markdown-code-scrollbar-thumb: #414141;
  --color-markdown-code-scrollbar-track: #ababab;
  --color-markdown-h1: #dcdcdc;
  --color-markdown-h2: #d2d2d2;
  --color-markdown-h3: #c8c8c8;
  --color-markdown-h4: #bebebe;
  --color-markdown-h5: #b4b4b4;
  --color-markdown-h6: #aaaaaa;
  --color-markdown-horizontal-rule: #d2d2d2;
  --color-markdown-link: #256e81;
  --color-markdown-link-active: #00546a;
  --color-markdown-link-hover: #2f9eba;
  --color-markdown-scrollbar-thumb: #272727;
  --color-markdown-scrollbar-track: #101010;
  --color-markdown-strong: #c8c8c8;
  --color-markdown-table-border: #4d4d4d;
  --color-markdown-table-row-background: #141414;
  --color-markdown-table-row-background-2n: #1a1f25;
  --color-markdown-text: #959595;
  --color-markdown-underline: transparent;
  --color-markdown-table-header: #c8c8c8;
  --color-markdown-table-scrollbar-thumb: #353535;
  --color-markdown-table-scrollbar-track: #141414;
  --font-markdown-h1: 1.5em;
  --font-markdown-h2: 1.25em;
  --font-markdown-h3: 1em;
  --font-markdown-h4: 1em;
  --font-markdown-h5: 0.875em;
  --font-markdown-h6: 0.85em;
  --margin-markdown-hx: 3rem 0 1rem 0;
  --color-nav-border: rgba(0, 0, 0, 0);
  --color-nav-border-drag: var(--color--filled);
  --color-nav-background: #32353d;
  --display-nav-border: inherit;
  --height-nav-area: 260px;
  --height-ng-buttons: 20px;
  --color-parser-menu-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-parser-menu-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-about-background: var(--color-nested-form-background);
  --color-about-scrollbar-thumb: rgba(80, 80, 80, 0.5);
  --color-about-scrollbar-track: rgba(80, 80, 80, 0.3);
  --color-highlight-level-0: #256e81;
  --color-highlight-level-0-hover: #2f9eba;
  --color-highlight-level-0-active: #2f9eba;
  --color-highlight-level-1: rgba(151, 24, 72, 1);
  --color-highlight-level-1-hover: rgba(216, 35, 103, 1);
  --color-highlight-level-1-active: rgba(216, 35, 103, 1);
  --color-highlight-level-2: rgba(163, 114, 29, 1);
  --color-highlight-level-2-hover: rgba(214, 150, 39, 1);
  --color-highlight-level-2-active: rgba(214, 150, 39, 1);
  --color-custom-variables-background: #050505;
  --color-details-options-background: var(--color-preview-background);
  --color-custom-variables-text: #a0a0a0;
  --color-custom-variables-divider: #121212;
  --width-preview-select-cats: 9em;
  --width-preview-select-type: 10em;
  --width-details-options: calc(0.5 * (100vw - var(--nav-width)) - 45px);
  --height-details-options: 330px;
  --position-update-notifier-left: 0;
  --position-update-notifier-right: 0;
  --position-update-notifier-bottom: 0;
  --position-update-notifier-top: 0;
  --margin-update-notifier: auto;
  --padding-update-notifier: 1em 2em;
  --width-update-notifier-backdrop: 100vw;
  --height-update-notifier-backdrop: 100vh;
  --position-update-notifier-backdrop: fixed;
  --filter-update-notifier-backdrop: blur(5px);
  --width-update-notifier: auto;
  --height-update-notifier: auto;
  --color-position-update-notifier-border: #414141;
  --border-update-notifier-width: 1px;
  --display-update: flex;
  --position-update: static;
  --display-preview-title: none;
  --display-exceptions-save-status: none;

  .only-deck {
    display: block;
  }

  .appOverlay {
    outline: 2px solid var(--color-preview-user-background);
    opacity: 0;
    transition: 0.5s;
    &:hover {
      opacity: 1;
    }

    .imageSelector {
      polyline {
        stroke-width: var(--select-arrow-left-width, 55);
      }
    }
    & > .appInfo > div.imageIndex {
      text-align: right !important;
      padding: 6px 8px 0 0 !important;
      font-size: calc(var(--preview-image-size) * 3em) !important;
    }
    .appButtons {
      display: flex;
      width: 100%;
    }
    .btn {
      @include button();
      @include clickButtonColor(click-button);
      display: initial;
      padding: 5px;
      flex: 1;
      font-size: 12px;
      border-radius: 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: var(--color-click-button-text-hover);
        border-color: var(--color-click-button-border-hover);
        background-color: var(--color-click-button-background-hover);

        fill: var(--color-click-button-text-hover);
      }

      &:active {
        color: var(--color-click-button-text-active);
        border-color: var(--color-click-button-border-active);
        background-color: var(--color-click-button-background-active);

        fill: var(--color-click-button-text-active);
      }
      img {
        display: none !important;
      }
    }
  }
}
